<div class="loader"></div>

<style>
	.loader {
		display: block;
		--height-of-loader: 4px;
		--loader-color: var(--color-primary-500);
		width: 100%;
		height: var(--height-of-loader);
		border-radius: 2px;
		background-color: var(--color-info-200);
		position: relative;
        overflow: hidden;
	}

	.loader::after {
		content: '';
		position: absolute;
		background: var(--loader-color);
		top: 0;
		left: 0;
		width: 20%;
		height: 100%;
		border-radius: 3px;
        animation: sweep 1s linear infinite;
	}
	@keyframes sweep {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(500%);
		}
	}
</style>
